<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="description"
      content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"
    />
    <meta
      name="keywords"
      content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>详情页</title>
    <link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/detail.css">
  </head>
  <body>
    <!-- 顶部快捷导航 开始-->
    <div class="shortcur">
      <div class="w">
        <div class="fl">
          <ul>
            <li>优品购欢迎您!</li>
            <li>
              <a href="#">请先登录</a>
              <a href="#" class="style-red">免费注册</a>
            </li>
          </ul>
        </div>

        <div class="fr">
          <ul>
            <li>
              <a>我的订单</a>
              <li class="spacer"></li>
            </li>
            <li>
              <a>我的优品购</a>
              <i class="icomoon"></i>
            </li>
            <li class="spacer"></li>
            <li>
              <a>优品购会员</a>
            </li>
            <li class="spacer"></li>
            <li>
              <a>企业采购</a>
            </li>
            <li class="spacer"></li>
            <li>
              <a>关注优品购</a>
              <i class="icomoon"></i>
            </li>
            <li class="spacer"></li>
            <li>
              <a>客户服务</a>
              <i class="icomoon"></i>
            </li>
            <li class="spacer"></li>
            <li>
              <a>网站导航</a>
              <i class="icomoon"></i>
            </li>
            <li class="spacer"></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 顶部快捷导航 结束-->

    <!-- header制作 开始 -->
    <div class="header w">
        <!-- logo 开始-->
        <div class="logo">
            <h1>
				<a href="index.html" title="品优购">品优购</a>
			</h1>
        </div>
        <!-- logo 结束-->

       <!-- search 开始         -->
       <div class="search">
           <input type="text" placeholder="语言开发">
           <button>搜索</button>
       </div>
        <!-- search 结束        -->

        <!-- hotwrods 开始 -->
        <div class="hotwrods">
           <ul>
             <li><a href="#" class="style-red">优惠购首发</a></li>
             <li><a href="#">亿元优惠</a></li>
             <li><a href="#">9.9团购</a></li>
             <li><a href="#">满90减30</a></li>
             <li><a href="#">办公用品</a></li>
             <li><a href="#">电脑</a></li>
             <li><a href="#">通信</a></li>
           </ul>
        </div>
        <!-- hotwrods 结束 -->

        <!-- shopcar 开始 -->
        <div class="shopcar">
          <i class="car"> </i>我的购物车 <i class="arrow">  </i>  
			   <i class="count">80</i>
        </div>
         <!-- shopcar 结束 -->        
    </div>
    <!-- header制作 结束 -->

    <!-- nav 开始 -->
    <div class="nav">
      <div class="w">
        <div class="dorpdown fl">
         <div class="dt">全部商品分类</div>
         <div class="dd" style="display: none;">
           <ul>
             <li class="menu_item"><a href="">家用电器</a></li>
             <li class="menu_item">
               <a href="#">手机</a>  、
               <a href="#">数码</a>  、
               <a href="#">通信</a>
               <i>  </i>  
             </li>
             <li class="menu_item"><a href="#">电脑、办公</a>  <i>  </i>  </li>
						<li class="menu_item"><a href="#">家居、家具、家装、厨具</a>  <i>  </i>  </li>
						<li class="menu_item"><a href="#">男装、女装、童装、内衣</a>  <i>  </i>  </li>
						<li class="menu_item"><a href="#">个户化妆、清洁用品、宠物</a>  <i>  </i>  </li>
						<li class="menu_item"><a href="#">鞋靴、箱包、珠宝、奢侈品</a>  <i>  </i>  </li>		
						<li class="menu_item"><a href="#">运动户外、钟表</a>  <i>  </i>  </li>
						<li class="menu_item"><a href="#">汽车、汽车用品</a>  <i>  </i>  </li>
						<li class="menu_item"><a href="#">母婴、玩具乐器</a>  <i>  </i>  </li>
						<li class="menu_item"><a href="#">食品、酒类、生鲜、特产</a>  <i>  </i>  </li>
						<li class="menu_item"><a href="#">医药保健</a>  <i>  </i>  </li>
						<li class="menu_item"><a href="#">图书、音像、电子书</a>  <i> </i>  </li>
						<li class="menu_item"><a href="#">彩票、旅行、充值、票务</a>  <i> </i>  </li>
						<li class="menu_item"><a href="#">理财、众筹、白条、保险</a>  <i>  </i>  </li>
           </ul>
         </div>
        </div>
			<div class="navitems fl">
        <ul>
           <li><a href="#">服装城</a></li>
           <li><a href="#">美妆馆</a></li>
           <li><a href="#">优品超市</a></li>
           <li><a href="#">全球购</a></li>
           <li><a href="#">闪购</a></li>
           <li><a href="#">团购</a></li>
           <li><a href="#">拍卖</a></li>
           <li><a href="#">有趣</a></li>
        </ul>
      </div>
      </div>
    </div>
     <!-- nav 结束 -->
      <!-- 详情页内容部分 开始-->
      <div class="de_container w">
        <!-- 面包屑导航 -->
        <div class="crumb-warp">
          <a href="#">手机、数码、通讯</a> >
          <a href="#">手机</a> >
          <a href="#">Apple苹果</a> >
          <a href="#">iPhone 6S Plus系类</a>
        </div>
        <!-- 产品介绍模块 -->
        <div class="product_intro clearfix">
           <!-- 预览区域 -->
           <div class="preview_wrap fl">
             <div class="preview_img">
               <img src="upload/s3.png" alt="" srcset="">
             </div>
             <div class="preview_list">
               <a href="#" class="arrow_prev"></a>
               <a href="#" class="arrow_next"></a>
               <ul class="list_item">
                 <li>
                   <img src="upload/pre.jpg" alt="" srcset="">
                 </li>
                 <li class="current">
                  <img src="upload/pre.jpg" alt="" srcset="">
                 </li>
                 <li>
                  <img src="upload/pre.jpg" alt="" srcset="">
                 </li>
                 <li>
                  <img src="upload/pre.jpg" alt="" srcset="">
                 </li>
                 <li>
                  <img src="upload/pre.jpg" alt="" srcset="">
                 </li>
               </ul>
             </div>
           </div>
           <!-- 产品详细 -->
           <div class="itemInfo_wrap fr">
             <div class="sku_name">
              Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机
             </div>
             <div class="news">
              推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返
             </div>
             <div class="summary">
               <dl class="summary_price">
                 <dt>价格</dt>
                 <dd>
                   <i class="price">￥5299.00</i> 
                   <a href="#">降价通知</a> 
                  <div class="remake"> 累计评价612188 </div>
                  </dd>
               </dl>
               <dl class="summary_promotion">
                 <dt>促销</dt>
                 <dd>
                   <em>加购价</em>
                   满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换 购热销商品 详情 》
                 </dd>
               </dl>
               <dl class="summary_support">
                 <dt>支持</dt>
                 <dd>以旧换新，闲置手机回收  4G套餐超值抢  礼品购</dd>
               </dl>
               <dl class="choose_color">
                 <dt>选择颜色</dt> 
                <dd>
                  <a href="javasprict;" class="current">玫瑰金</a>
                  <a href="javasprict;">金色</a>
                  <a href="javasprict;">白色</a>
                  <a href="javasprict;">黑色</a>
                </dd>
               </dl>
               <dl class="choose_version">
                <dt>选择版本</dt> 
                <dd>
                   <a href="javasprict;">公开版</a>
                   <a href="javasprict;" class="current">移动4G</a>
                 </dd>
               </dl>
               <dl class="choose_type">
                <dt>购买方式</dt> 
                <dd>
                   <a href="javasprict;">官方标配</a>
                   <a href="javasprict;" class="current">移动优惠购</a>
                   <a href="javasprict;">电信优惠购</a>
                 </dd>
               </dl>

               <div class="choose_btns">
                  <div class="choose_amount">
                    <input type="text">
                    <a href="javasprict:;" class="add">+</a>
                    <a href="javasprict:;" class="reduce">-</a>
                  </div>
                  <a href="#" class="add_car">加入购物车</a>
               </div>
             </div>
           </div>
        </div>

        <!-- 产品参数 -->
        <div class="product_detail clearfix">
          <!-- aside -->
          <div class="aside fl">
            <div class="tab_list">
              <ul>
                <li class="first_tab ">相关分类</li>
                <li class="second_tab current">推荐品牌</li>
              </ul>
            </div>
            <div class="tab_con">
              <ul>
                <li>
                  <img src="upload/aside_img.jpg" alt="" srcset="">
                  <h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5>
                  <div class="aside_price">￥19</div>
                  <a href="#" class="as_addcar">加入购物车</a>
                </li>
                <li>
                  <img src="upload/aside_img.jpg" alt="" srcset="">
                  <h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5>
                  <div class="aside_price">￥19</div>
                  <a href="#" class="as_addcar">加入购物车</a>
                </li>
                <li>
                  <img src="upload/aside_img.jpg" alt="" srcset="">
                  <h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5>
                  <div class="aside_price">￥19</div>
                  <a href="#" class="as_addcar">加入购物车</a>
                </li>
                <li>
                  <img src="upload/aside_img.jpg" alt="" srcset="">
                  <h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5>
                  <div class="aside_price">￥19</div>
                  <a href="#" class="as_addcar">加入购物车</a>
                </li>
                <li>
                  <img src="upload/aside_img.jpg" alt="" srcset="">
                  <h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5>
                  <div class="aside_price">￥19</div>
                  <a href="#" class="as_addcar">加入购物车</a>
                </li>
                <li>
                  <img src="upload/aside_img.jpg" alt="" srcset="">
                  <h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5>
                  <div class="aside_price">￥19</div>
                  <a href="#" class="as_addcar">加入购物车</a>
                </li>
              </ul>
            </div>
          </div>
          <!-- detail -->
          <div class="detail fr">456</div>
        </div>
      </div>
      <!-- 详情页内容部分 结束-->
       <!--footer-->
       <div class="footer">
          <div class="w">
            <div class="mod_service">
              <ul>
                <li>
                  <i class="mod_service_icon mod_service_zheng"></i>
                  <div class="mod_service_tit">
                    <h5>正品保障</h5>
                    <p>正品保障，提供发票</p>
                  </div>
                </li>
                <li>
                  <i class="mod_service_icon mod_service_ji"></i>
                  <div class="mod_service_tit">
                    <h5>极速物流</h5>
                    <p>急速物流，急速送达</p>
                  </div>
                </li>
                <li>
                  <i class="mod_service_icon mod_service_wu"></i>
                  <div class="mod_service_tit">
                    <h5>无忧售后</h5>
                    <p>7天无理由退换货</p>
                  </div>
                </li>
                <li>
                  <i class="mod_service_icon mod_service_te"></i>
                  <div class="mod_service_tit">
                    <h5>特色服务</h5>
                    <p>私人定制家电套餐</p>
                  </div>
                </li>
                <li>
                  <i class="mod_service_icon mod_service_bang"></i>
                  <div class="mod_service_tit">
                    <h5>帮助中心</h5>
                    <p>您的购物指南</p>
                  </div>
                </li>
              </ul>
            </div>
            <div class="mod-help">
              <dl class="mod-help-item">
                <dt>购物指南</dt>
                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">会员介绍</a></dd>
                <dd><a href="#">生活旅行/团购</a></dd>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">大家电</a></dd>
                <dd><a href="#">联系客服</a></dd>
              </dl>
              <dl class="mod-help-item">
                <dt>配送方式</dt>
                <dd><a href="#">上门自提</a></dd>
                <dd><a href="#">211限时送达</a></dd>
                <dd><a href="#">配送服务查询</a></dd>
                <dd><a href="#">配送费收取标准</a></dd>
                <dd><a href="#">海外配送</a></dd>
              </dl>
              <dl class="mod-help-item">
                <dt>支付方式</dt>
                <dd><a href="#">货到付款</a></dd>
                <dd><a href="#">在线支付</a></dd>
                <dd><a href="#">分期付款</a></dd>
                <dd><a href="#">邮局汇款</a></dd>
                <dd><a href="#">公司转账</a></dd>
              </dl>
              <dl class="mod-help-item">
                <dt>售后服务</dt>
                <dd><a href="#">售后政策</a></dd>
                <dd><a href="#">价格保护</a></dd>
                <dd><a href="#">退款说明</a></dd>
                <dd><a href="#">返修/退换货</a></dd>
                <dd><a href="#">取消订单</a></dd>
                <dd><a href="#">联系客服</a></dd>
              </dl>
              <dl class="mod-help-item">
                <dt>特色服务</dt>
                <dd><a href="#">夺宝岛</a></dd>
                <dd><a href="#">DIT装机</a></dd>
                <dd><a href="#">验保服务</a></dd>
                <dd><a href="#">品优购e卡</a></dd>
                <dd><a href="#">品优购通信</a></dd>
              </dl>
              <dl class="mod-help-item mod-help-app">
                <dt>帮助中心</dt>
                <dd>
                  <img src="upload/erweima.png" alt="" srcset="">
                  <p>品优购客户端</p>
                </dd>
              </dl>
            </div>
            <div class="mod-copyright">
              <p class="mod_copyright_links">
                <a href="#">关于我们</a>
                <span class="mod_copyright_split">|</span>
                <a href="#"> 联系我们</a>
                <span class="mod_copyright_split">|</span>
                <a href="#"> 联系客服</a>
                <span class="mod_copyright_split">|</span>
                <a href="#">商家入驻</a>
                <span class="mod_copyright_split">|</span>
                <a href="#">营销中心</a>
                <span class="mod_copyright_split">|</span>
                <a href="#"> 手机品优购</a>
                <span class="mod_copyright_split">|</span>
                <a href="#"> 友情链接</a>
                <span class="mod_copyright_split">|</span>
                <a href="#">销售联盟</a>
                <span class="mod_copyright_split">|</span>
                <a href="#">品优购社区</a>
                <span class="mod_copyright_split">|</span>
                <a href="#"> 品优购公益</a>
                <span class="mod_copyright_split">|</span>
                <a href="#">English Site</a>
                <span class="mod_copyright_split">|</span>
                <a href="#">Contact U</a>
              </p>
              <p class="mod_copyright_info">
                
           地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 </br>
           邮箱: zhanghj+itcast.cn  
              </p>
            </div>
          </div>
       </div>
        <!--footer-->
  </body>
</html>
